<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        name="viewport">
  <meta content="ie=edge" http-equiv="X-UA-Compatible">
  <title>绘制视频加上水印</title>
  <style>
      #canvas {
          border: 1px solid #000;
          background-color: aliceblue;
      }

      #video {
          display: none;
      }

      .play {
          width: 300px;
          height: 200px;
          background: url(../img/img.png) no-repeat;
          background-size: 300px 200px;

          position: relative;
      }

      .play::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          width: 0;
          height: 0;
          border-left: 50px solid #ccc;
          border-top: 50px solid transparent;
          border-bottom: 50px solid transparent;
      }

      .play::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-60%, -50%);

          width: 110px;
          height: 110px;
          border-radius: 50%;
          border: 2px solid #ccc;
      }
  </style>
</head>
<body>
<!--canvas-->
<canvas height="500" id="canvas" width="700"></canvas>
<!--video-->
<video controls height="200" id="video" src="../img/bear.mp4" width="300">
</video>
<!--<button id="btn">播放</button>-->
<div class="play" id="btn"></div>
</body>
<script>
  // 获取canvas
  const canvas = document.getElementById('canvas');
  // 获取video
  const video = document.getElementById('video');
  // 获取canvas的2d上下文
  const ctx = canvas.getContext('2d');

  // 获取按钮
  const btn = document.getElementById('btn');
  btn.onclick = function () {
    // 是否已经暂停
    if (video.paused) {
      video.play();
      drawVideo();
    } else {
      video.pause();
    }
    // 播放视频
    // video.play();
    // 绘制视频
    // drawVideo();
    //   隐藏按钮
    // btn.style.display = 'none';
  };

  //   logo水印图片对象
  let img = new Image();
  img.src = "../img/logo_jun.png"

  function drawVideo() {
    // 绘制视频
    ctx.drawImage(video, 0, 0, 700, 500);
    // 绘制水印
    ctx.drawImage(img, 470, 350, 200, 100);
    // 帧动画
    requestAnimationFrame(drawVideo);
  }
</script>
</html>